<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
     <!-- 引入刚刚下载的 ECharts 文件 -->
     <script src="./echarts.min.js"></script>
  </head>
  <body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));

  option = {
  title: [
    {
      text: '男女薪资分布',
      textStyle: {
        color: '#5c5c5c',
        fontSize: '16'
      },
      left: '1%'
    },
    {
      subtext: '男生',
      subtextStyle:{color:'#464646'},
      left: '50%',
      top: '35%',
      textAlign: 'center'
    },

    {
      subtext: '女生',
      subtextStyle:{color:'#464646'},
      left: '50%',
      top: '85%',
      textAlign: 'center'
    }
  ],

  series: [
    {
      type: 'pie',
      radius: ['15%', '25%'],
      center: ['50%', '20%'],
      data: [
        {
          name: '1万以下',
          value: 6
        },
        {
          name: '1-1.5万',
          value: 18
        },
        {
          name: '1.5万-2万',
          value: 22
        },
        {
          name: '2万以上',
          value: 22
        }
      ]
    },

    {
      type: 'pie',
      radius: ['15%', '25%'],
      center: ['50%', '70%'],
      data: [
        {
          name: '1万以下',
          value: 3
        },
        {
          name: '1-1.5万',
          value: 6
        },
        {
          name: '1.5万-2万',
          value: 22
        },
        {
          name: '2万以上',
          value: 18
        }
      ]
    }
  ],
  color: ['#fda224', '#5097ff', '#3fceff', '#34d39a']
};

  


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
    </script>
  </body>
</html>

